<template>
  <div class="box">
    <div class="goods-list">
      <div class="item" v-for="item in goodsList" :key="item.id">
        <img :src="item.img_url" alt="" />
        <p>{{ item.title }}</p>
        <div class="footer">
          <div class="price">
            <span class="new"
              ><span>￥</span
              ><span class="num">{{ item.sell_price }}</span></span
            >
            <del class="old">￥{{ item.market_price }}</del>
          </div>
          <div class="state">
            <span>热卖中</span>
            <span>剩{{ item.stock_quantity }}件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getgoodsAPI } from "../apis/user";
export default {
  data() {
    return {
      goodsList: [],
    };
  },
  async created() {
    const res = await getgoodsAPI("pageindex=1");
    console.log(res);
    if (res.data.status === 0) {
      this.goodsList = res.data.message;
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  margin-top: 40px;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 45%;
    padding: 2%;
    img {
      width: 100%;
    }

    p {
      font-size: 12px;
      height: 34px;
      overflow: hidden;
      // white-space: nowrap;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .footer {
      height: 50px;
      background-color: #f0f0f0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 8px 5px;
      .price {
        .new {
          color: red;
          font-weight: bold;
          margin-right: 8px;
        }

        .old {
          font-size: 14px;
          color: #666;
        }
      }

      .state {
        display: flex;
        justify-content: space-between;
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>